<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        .biji {
            margin: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 5px;
            position: relative;
            padding-top: 15px;
        }

        .biji span {
            position: absolute;
            right: 3px;
            top: 3px;
            font-size: 12px;
            color: #666;
        }

        .biji .createDate {
            font-size: 12px;
            margin-top: 10px;
            color: #666;
        }
    </style>
</head>
<body>


<button id="bakbtn">备份</button>
<button id="impbtn">导入</button>
<span id="shaohou" style="display:none">请稍后...</span>

<div id="d1">
    <h2>备忘录</h2>
    <hr/>
    <div style="font-size:30px;" id="addbtn">+</div>
    <div id="bijiList"></div>
</div>

<div id="d2" style="display:none">
    <h2 id="returnbtn">返回 新增备忘录</h2>
    <hr/>
    <div id="cntDiv" contentEditable style="padding:5px;height:300px;overflow:auto;border:1px solid red"></div>
</div>

<script>
    var bijis = [];
    loadData();

    function loadData() {
        if (localStorage.bijis) {
            bijis = JSON.parse(localStorage.bijis);
        }

        bijiList.innerHTML = "";

        for (var i = bijis.length - 1; i >= 0; i--) {
            var b = bijis[i];
            var newDiv = document.createElement("div");
            newDiv.className = "biji";
            var deleteSpan = document.createElement("span");
            deleteSpan.innerHTML = "删除";
            var titleDiv = document.createElement("div");
            titleDiv.className = "title";
            titleDiv.innerHTML = b.content;
            var createDateDiv = document.createElement("div");
            createDateDiv.className = "createDate";
            createDateDiv.innerHTML = b.createDate;

            newDiv.appendChild(deleteSpan);
            newDiv.appendChild(titleDiv);
            newDiv.appendChild(createDateDiv);

            bijiList.appendChild(newDiv);
        }
    }

    impbtn.onclick = function () {
        var uploadInput = document.createElement("input");
        document.body.appendChild(uploadInput);
        uploadInput.type = "file";
        uploadInput.style.display = "none";
        uploadInput.click();
        uploadInput.onchange = function () {
            var f = uploadInput.files[0];
            var filereader = new FileReader();
            filereader.readAsText(f);
            shaohou.style.display = "block";


            filereader.onload = function () {

                setTimeout(function () {
                    shaohou.style.display = "none";
                    var bijis = JSON.parse(filereader.result);
                    localStorage.bijis = filereader.result;
                    loadData();
                }, 3000);

            };


        }
    };

    bakbtn.onclick = function () {
        var blob = new Blob([JSON.stringify(bijis)], {"type": "application/json"});
        var url = URL.createObjectURL(blob);
        console.log(url);
        var aEle = document.createElement("a");
        aEle.download = "备份.biji";
        aEle.href = url;
        document.body.appendChild(aEle);
        aEle.click();
        document.body.removeChild(aEle);
    };

    addbtn.onclick = function () {
        d1.style.display = "none";
        d2.style.display = "block";
        cntDiv.focus();//获得光标
    };

    returnbtn.onclick = function () {
        d1.style.display = "block";
        d2.style.display = "none";

        if (cntDiv.innerHTML.length > 0) {
            var biji = {
                content: cntDiv.innerHTML,
                createDate: (new Date()).toLocaleString()
            };
            bijis.push(biji);
            localStorage.bijis = JSON.stringify(bijis);
            cntDiv.innerHTML = "";
            loadData();
        }
    };
</script>
</body>
</html>